<template>
  <view class="brand-item content">
    <div class="self">
      <image class="avatar" :src="IMG_URL + brandData.brandLogoImage" mode="aspectFill"></image>
      <div class="title">{{ brandData.brandName }}</div>
      <div class="operate">
        <div class="status" :class="brandData.auditStatus == 2 ? 'pass' : ''">
          {{ getAuditStatusText(brandData.auditStatus) }}
        </div>
        <div class="btn" @click="goPage('shop')">创建店铺</div>
      </div>
    </div>

    <div class="shops" v-if="shopList && shopList.length > 0">
      <view class="item" v-for="item in shopList">
        <div class="main">
          <image class="avatar" :src="IMG_URL + getShopImage(item.shop.shopImage)" mode="aspectFill"></image>

          <div class="info">
            <div class="title">{{ item.shop.shopName }}</div>
            <div class="address">门店地址：{{ item.shop.shopAddress }}</div>
            <div class="time">营业时间：{{ item.shop.businessTime }}</div>
          </div>

          <div class="operate">
            <div class="status" :class="brandData.auditStatus == 2 ? 'pass' : ''">
              {{ getAuditStatusText(item.shop.auditStatus) }}
            </div>
            <div class="btn" @click="goPage('goods')">创建商品</div>
          </div>
        </div>
        <div class="list" v-if="item.goodsList && item.goodsList.length">
          <div class="goods_item" v-for="i in item.goodsList">
            <image class="img" :src="IMG_URL + i.goodsImage" mode="aspectFill"></image>
            <div class="title">{{ i.goodsName }}</div>
          </div>
        </div>
      </view>
    </div>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { IMG_URL } from '../../config/config';

  const props = defineProps({
    data: Object,
  });
  const brandData = computed(() => {
    return props.data.brand;
  });

  const shopList = computed(() => {
    return props.data.shopList;
  });

  const emits = defineEmits(['click']);

  function getAuditStatusText(status) {
    const map = {
      1: '待审核',
      2: '已审核',
    };
    return map[status] || '无状态';
  }

  function clickHandler(id) {
    emits('click', id);
  }

  function getShopImage(imgString) {
    let imageList = imgString.split(',');
    if (imageList.length === 1) {
      return imageList[0];
    } else if (imageList.length > 1) {
      return imageList[0];
    } else {
      return '';
    }
  }

  function goPage(type) {
    if (type === 'goods') {
      uni.navigateTo({
        url: '/pagesB/goods/index?from=home',
      });
    } else {
      uni.navigateTo({
        url: '/pagesB/shop/index?from=home',
      });
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
  }
  .brand-item {
    padding: 0 40rpx;
    padding-top: 27rpx;
    padding-bottom: 17rpx;
    .self {
      display: flex;
      // align-items: center;
      justify-content: space-between;
      padding-bottom: 17rpx;
      border-bottom: 2rpx solid #d6d6d6;

      .avatar {
        width: 140rpx;
        min-width: 140rpx;
        height: 140rpx;
        border-radius: 16rpx;
        background-color: #ccc;
        margin-right: 21rpx;
      }

      .title {
        flex: 1;
        font-weight: 600;
        font-size: 30rpx;
        color: #1e2737;
      }
      .operate {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 125rpx;
        min-width: 125rpx;

        .status {
          width: 125rpx;
          height: 43rpx;
          text-align: center;
          line-height: 43rpx;
          border-radius: 40rpx;
          font-size: 20rpx;
          color: #ff8f16;
          background-color: #ffebd9;

          &.pass {
            background-color: #4287f6;
            color: #fff;
          }
        }

        .btn {
          width: 125rpx;
          height: 43rpx;
          line-height: 39rpx;
          text-align: center;
          border: 2rpx solid #4287f6;
          font-weight: 500;
          font-size: 18rpx;
          color: #4287f6;
          border-radius: 40rpx;
        }
      }
    }

    .shops {
      .item {
        padding-bottom: 17rpx;
        padding-top: 22rpx;
        border-bottom: 2rpx solid #d6d6d6;

        &:nth-last-child(1) {
          border: none;
        }
      }
      .main {
        display: flex;
        justify-content: space-between;

        .avatar {
          width: 100rpx;
          min-width: 100rpx;
          height: 100rpx;
          border-radius: 16rpx;
          margin-right: 15rpx;
          align-self: center;
          background-color: #ccc;
        }
        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          row-gap: 8rpx;
          color: #1e2737;

          .title {
            font-weight: 500;
            font-size: 24rpx;
            /* 显示省略号 */
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

          .address,
          .time {
            font-size: 22rpx;
          }
        }
        .operate {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          width: 125rpx;
          min-width: 125rpx;

          .status {
            width: 125rpx;
            height: 43rpx;
            text-align: center;
            line-height: 43rpx;
            border-radius: 40rpx;
            font-size: 20rpx;
            color: #ff8f16;
            background-color: #ffebd9;

            &.pass {
              background-color: #4287f6;
              color: #fff;
            }
          }
          .btn {
            width: 125rpx;
            height: 43rpx;
            line-height: 39rpx;
            text-align: center;
            border: 2rpx solid #4287f6;
            font-weight: 500;
            font-size: 18rpx;
            color: #4287f6;
            border-radius: 40rpx;
          }
        }
      }

      .list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        margin-top: 30rpx;
        -ms-overflow-style: none; /* IE 和 Edge */
        scrollbar-width: none; /* Firefox */

        &::-webkit-scrollbar {
          width: 0;
          height: 0;
          display: none;
        }
        .goods_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 20rpx;
          .img {
            width: 166rpx;
            height: 105rpx;
            border-radius: 8rpx;
            vertical-align: middle;
            margin-bottom: 8rpx;
            background-color: #ccc;
          }

          .title {
            max-width: 166rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #1e2737;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
        }
      }
    }
  }
</style>
